<template>
	<view class="page">
		<view class="list">
			<view class="listX">
				<view class="listX_top">
					<view class="listX_top_field" @tap="changeDate()">
						<u-field v-model="appointmentDate" label="可预约日期" :disabled="true" label-width="200" input-align="right"
						 right-icon="arrow-right" placeholder="请选择"></u-field>
					</view>
					<view class="listX_top_field" @tap="changeTime()">
						<u-field v-model="appointmenTime" label="可预约时间段" :disabled="true" label-width="200" input-align="right"
						 right-icon="arrow-right" placeholder="请选择"></u-field>
					</view>
				</view>
				<!-- <view class="listX_del">
					<view class="listX_del_1" @tap="deleteList(v.aid)">
						<image src="/static/talent/user/del1.png"></image>
						<text>删除</text>
					</view>
				</view> -->
			</view>
		</view>
		<view class="footer">
			<view class="footer1" v-if="id == ''" @tap="addDate">添加</view>
			<view class="footer1" v-else @tap="addDate">修改</view>
			<!-- <view class="footer2" @tap="submitDate"></view> -->
		</view>
		<!-- <view v-if="listData.length == 0" style="margin: 20rpx 0;">
			<u-empty style="margin: 20rpx 0;" text="没有更多了" mode="list"></u-empty>
		</view> -->
		<!-- 选择预约时间段 -->
		<w-picker :visible.sync="visible" :changeType="5" mode="linkage" value="" :current="false" :second="true" @confirm="onConfirm($event,'linkage')"
		 @cancel="onCancel" ref="linkage" :options="array" default-type="label">
		</w-picker>
		<!-- 选择预约时间 -->
		<w-picker :visible.sync="visible" :changeType="4" mode="date" startYear="2000" endYear="2050" value="" :current="true"
		 fields="day" @confirm="onConfirm2($event,'date')" @cancel="onCancel2" :disabled-after="false" ref="date"></w-picker>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		data() {
			return {
				appointmentDate: '',
				appointmenTime: '',
				dateValue: '请选择',
				visible: false,
				shortTerm: '',
				array: [
					{
						label: "05:00",
						value: 1,
						children: [
							{
								label: "06:00",
								value: 1
							},
							{
								label: "07:00",
								value: 1
							},
							{
								label: "08:00",
								value: 1
							},{
								label: "09:00",
								value: 1
							},
							{
								label: "10:00",
								value: 1
							},
							{
								label: "11:00",
								value: 1
							},
							{
								label: "12:00",
								value: 1
							},
							{
								label: "13:00",
								value: 1
							},
							{
								label: "14:00",
								value: 1
							},
							{
								label: "15:00",
								value: 1
							},
							{
								label: "16:00",
								value: 1
							},
							{
								label: "17:00",
								value: 1
							},
							{
								label: "18:00",
								value: 1
							},
							{
								label: "19:00",
								value: 1
							},
							{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "06:00",
						value: 1,
						children: [
							{
								label: "07:00",
								value: 1
							},
							{
								label: "08:00",
								value: 1
							},{
								label: "09:00",
								value: 1
							},
							{
								label: "10:00",
								value: 1
							},
							{
								label: "11:00",
								value: 1
							},
							{
								label: "12:00",
								value: 1
							},
							{
								label: "13:00",
								value: 1
							},
							{
								label: "14:00",
								value: 1
							},
							{
								label: "15:00",
								value: 1
							},
							{
								label: "16:00",
								value: 1
							},
							{
								label: "17:00",
								value: 1
							},
							{
								label: "18:00",
								value: 1
							},
							{
								label: "19:00",
								value: 1
							},
							{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "07:00",
						value: 1,
						children: [
							{
								label: "08:00",
								value: 1
							},{
								label: "09:00",
								value: 1
							},
							{
								label: "10:00",
								value: 1
							},
							{
								label: "11:00",
								value: 1
							},
							{
								label: "12:00",
								value: 1
							},
							{
								label: "13:00",
								value: 1
							},
							{
								label: "14:00",
								value: 1
							},
							{
								label: "15:00",
								value: 1
							},
							{
								label: "16:00",
								value: 1
							},
							{
								label: "17:00",
								value: 1
							},
							{
								label: "18:00",
								value: 1
							},
							{
								label: "19:00",
								value: 1
							},
							{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "08:00",
						value: 1,
						children: [{
								label: "09:00",
								value: 1
							},
							{
								label: "10:00",
								value: 1
							},
							{
								label: "11:00",
								value: 1
							},
							{
								label: "12:00",
								value: 1
							},
							{
								label: "13:00",
								value: 1
							},
							{
								label: "14:00",
								value: 1
							},
							{
								label: "15:00",
								value: 1
							},
							{
								label: "16:00",
								value: 1
							},
							{
								label: "17:00",
								value: 1
							},
							{
								label: "18:00",
								value: 1
							},
							{
								label: "19:00",
								value: 1
							},
							{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "09:00",
						value: 1,
						children: [{
								label: "10:00",
								value: 1
							},
							{
								label: "11:00",
								value: 1
							},
							{
								label: "12:00",
								value: 1
							},
							{
								label: "13:00",
								value: 1
							},
							{
								label: "14:00",
								value: 1
							},
							{
								label: "15:00",
								value: 1
							},
							{
								label: "16:00",
								value: 1
							},
							{
								label: "17:00",
								value: 1
							},
							{
								label: "18:00",
								value: 1
							},
							{
								label: "19:00",
								value: 1
							},
							{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "10:00",
						value: 1,
						children: [{
								label: "11:00",
								value: 1
							},
							{
								label: "12:00",
								value: 1
							},
							{
								label: "13:00",
								value: 1
							},
							{
								label: "14:00",
								value: 1
							},
							{
								label: "15:00",
								value: 1
							},
							{
								label: "16:00",
								value: 1
							},
							{
								label: "17:00",
								value: 1
							},
							{
								label: "18:00",
								value: 1
							},
							{
								label: "19:00",
								value: 1
							},
							{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "11:00",
						value: 1,
						children: [{
								label: "12:00",
								value: 1
							},
							{
								label: "13:00",
								value: 1
							},
							{
								label: "14:00",
								value: 1
							},
							{
								label: "15:00",
								value: 1
							},
							{
								label: "16:00",
								value: 1
							},
							{
								label: "17:00",
								value: 1
							},
							{
								label: "18:00",
								value: 1
							},
							{
								label: "19:00",
								value: 1
							},
							{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "12:00",
						value: 1,
						children: [{
								label: "13:00",
								value: 1
							},
							{
								label: "14:00",
								value: 1
							},
							{
								label: "15:00",
								value: 1
							},
							{
								label: "16:00",
								value: 1
							},
							{
								label: "17:00",
								value: 1
							},
							{
								label: "18:00",
								value: 1
							},
							{
								label: "19:00",
								value: 1
							},
							{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "13:00",
						value: 1,
						children: [{
								label: "14:00",
								value: 1
							},
							{
								label: "15:00",
								value: 1
							},
							{
								label: "16:00",
								value: 1
							},
							{
								label: "17:00",
								value: 1
							},
							{
								label: "18:00",
								value: 1
							},
							{
								label: "19:00",
								value: 1
							},
							{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "14:00",
						value: 1,
						children: [{
								label: "15:00",
								value: 1
							},
							{
								label: "16:00",
								value: 1
							},
							{
								label: "17:00",
								value: 1
							},
							{
								label: "18:00",
								value: 1
							},
							{
								label: "19:00",
								value: 1
							},
							{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "15:00",
						value: 1,
						children: [{
								label: "16:00",
								value: 1
							},
							{
								label: "17:00",
								value: 1
							},
							{
								label: "18:00",
								value: 1
							},
							{
								label: "19:00",
								value: 1
							},
							{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "16:00",
						value: 1,
						children: [{
								label: "17:00",
								value: 1
							},
							{
								label: "18:00",
								value: 1
							},
							{
								label: "19:00",
								value: 1
							},
							{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "17:00",
						value: 1,
						children: [{
								label: "18:00",
								value: 1
							},
							{
								label: "19:00",
								value: 1
							},
							{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "18:00",
						value: 1,
						children: [{
								label: "19:00",
								value: 1
							},
							{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "19:00",
						value: 1,
						children: [{
								label: "20:00",
								value: 1
							},
							{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "20:00",
						value: 1,
						children: [{
								label: "21:00",
								value: 1
							},
							{
								label: "22:00",
								value: 1
							}
						]
					},
					{
						label: "21:00",
						value: 1,
						children: [{
							label: "22:00",
							value: 1
						}]
					},
				],
				//////////
				listData: [],
				dayIndex: '',
				dateIndex: '',
				start_end_time: '',
				start_time: '',
				end_time: '',
				type: 'add',
				id: ''
			}
		},
		components: {
			wPicker
		},
		onLoad(option) {
			console.log(option)
			this.id = option.id
			this.appointmentDate  = option.sub_date
			this.appointmenTime = option.start_end_time
			if (this.id) {
				uni.setNavigationBarTitle({
					title: '修改预约时间'
				})
				this.type = 'save'
			}
		},
		methods: {
			changeTime() {

				if (this.appointmentDate == '') {
					this.$message.info('请先选择日期')
				} else {
					this.$refs.linkage.show()
				}
			},
			changeDate() {
				this.$refs.date.show()
			},
			onConfirm(e) {
				this.appointmenTime = e.result.substring(0, 5) + '-' + e.result.substring(5, 10)
				this.start_end_time = this.appointmenTime
				this.start_time = this.appointmentDate + ' ' + e.result.substring(0, 5)
				this.end_time = this.appointmentDate + ' ' + e.result.substring(5, 10)
			},
			onCancel() {

			},
			onConfirm2(e) {
				// let selectTime = new Date(e.result).getTime() / 1000 / 60 / 60 / 24
				// let nowTime = new Date().getTime() / 1000 / 60 / 60 / 24
				// if (selectTime + 1 < nowTime) {
				// 	this.$message.info('请选择正确的时间')
				// 	return
				// }
				this.appointmentDate = e.result
			},
			onCancel2() {

			},
			
			// 添加时间段
			addDate() {
				let changeDate = new Date(this.start_time + ':00').getTime()
				let newDate = new Date().getTime()
				if (changeDate < newDate) {
					this.$message.info('请选择正确时间')
					return false
				}
				
				this.$api.post(global.apiUrls.addAppointment, {
					sub_date: this.appointmentDate,
					start_time: this.start_time,
					end_time: this.end_time,
					type: this.type,
					id: this.id
				}).then(res => {
					this.$message.info(res.data.msg)
					if(res.data.code == 1) {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #f2f2f1;
		color: #333333;
		padding-bottom: 130rpx;

		.list {
			padding: 32rpx 24rpx 0;

			.listX {
				margin-bottom: 32rpx;

				.listX_top {
					padding: 0 24rpx;
					border-radius: 8rpx;
					background-color: #FFFFFF;

					.listX_top_field {
						font-size: 32rpx;
						padding: 32rpx 0;
						border-bottom: 1rpx solid #f2f2f1;

						// display: flex;
						/deep/.u-label-text {
							color: #6B6F73;
						}
					}

					.listX_top_field:last-child {
						border-bottom: 1rpx solid #FFFFFF;
					}
				}

				.listX_del {
					margin-left: 24rpx;
					background: #F8F8F8;
					width: 654rpx;
					height: 72rpx;

					opacity: 1;
					border-radius: 0px 0px 8rpx 8rpx;
					padding: 0 24rpx;

					.listX_del_1 {
						float: right;
						padding-top: 16rpx;

						image {
							width: 28rpx;
							height: 28rpx;
							transform: translateY(4rpx);
						}

						text {
							font-size: 24rpx;
							color: #666666;
							margin-left: 16rpx;
						}
					}
				}
			}
		}

		.footer {
			padding: 16rpx 32rpx 40rpx;
			background: #FFFFFF;
			width: 100%;
			position: fixed;
			bottom: 0;
			overflow: hidden;
			text-align: center;
			line-height: 88rpx;
			display: flex;

			.footer1 {
				width: 100%;
				height: 88rpx;
				border: 1rpx solid #006747;
				opacity: 1;
				border-radius: 8rpx;
				color: #FFFFFF;
				// margin-right: 24rpx;
				background: #006747;
			}

			// .footer2 {
			// 	width: 420rpx;
			// 	height: 88rpx;
			// 	background: #006747;
			// 	opacity: 1;
			// 	border-radius: 8rpx;
			// 	color: #FFFFFF;
			// }
		}

		/deep/.u-field {
			padding: 0 !important;
			font-size: 32upx !important;
			color: rgba(51, 51, 51, 1);
		}

		/deep/.u-flex {
			width: 100%;
			margin: 0;
			font-size: 32rpx;

		}

		/deep/.fild-body {
			font-size: 50rpx !important;
			line-height: 50rpx !important;
		}

		/deep/.uni-input-input {}

		/deep/.u-field__input-wrap {
			// height: 128upx;
			// line-height: 128upx;
			font-size: 32upx;
			color: rgba(51, 51, 51, 1);
		}

		/deep/.u-icon {
			transform: translateY(-7rpx);
		}
	}
</style>
